<template>
  <section>
    <div class="card-box">
      <el-card class="box-card" v-for="(item,index) in currAds" :key="index" v-if="currAds.length>0">
        <el-row slot="header" class="clearfix">
          <span>{{item.description}}</span>
          <span style="position: absolute;right: -10px" >
          <!--<el-button size="mini" type="text" @click="editAdBtn(item)">编辑</el-button>-->
          <el-button size="mini" type="text" @click="$emit('editAdBtn',item)">编辑</el-button>
          <el-button size="mini" type="text" @click="$emit('delAdBtn',item)" style="color:red;">删除</el-button></span>
        </el-row>
        <el-form label-width="55px" size="mini">
          <el-form-item label="预览" style="border:0px solid #bbb">
            <el-row style="border:1px solid #bbb;padding: 5px;width:200px;height: 200px;border-radius: 5%">
              <img :src="item.img" v-if="item.img !== ''" style="width:100%;height:100%;border-radius: 5%"/>
              <i class="el-icon-picture" v-else style="font-size: 100px;text-align: center;color: #bbb;width:100%"/>
            </el-row>
          </el-form-item>
          <el-form-item label="优惠价">
            <el-row style="border:1px solid #bbb;width:200px;border-radius: 5px;font-size: 15px;text-align: center">
              {{item.data.discount}}
            </el-row>
          </el-form-item>
          <el-form-item label="原价" style="border: 0px solid red;">
            <el-row style="border:1px solid #bbb;width:200px;border-radius: 5px;font-size: 15px;text-align: center">
              {{item.data.prices}}
            </el-row>
          </el-form-item>
        </el-form>
      </el-card>

      <!--<el-dialog :visible.sync="newAdDialog" v-if="currAd" title="设置">-->
      <!--<new-ad :ad="currAd" v-on:cancelDialog="getAds(0,lightBoxId)"></new-ad>-->
      <!--</el-dialog>-->
    </div>
  </section>
</template>

<script>
  export default {
    name: "featuredBox",
    props:['currAds'],
    data(){
      return {
        newAdDialog:false,
        currAd:null,
        currItem:null,
      }
    },
    watch:{
      currAds(nv,ov){
        if(nv){
          console.log('观察变化-------',nv)
        }
      }
    },
    created(){
      console.log('看一下传过来的ad数组--------',this.currAds)
    },
    methods: {
    }
  }
</script>

<style scoped>
  .card-box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .box-card{
    width: 400px;
    margin-right: 20px;
    margin-top: 20px;
  }
</style>
